<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/css/base.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/index.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/m.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"
	type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>
<style type="text/css">
.menu {
	width: 100px;
	position: relative;
	height: 26px;
	display: inline-block;
}

.menu .sub {
	position: absolute;
	display: none;
	left: 10px;
	top: 26px;
	background-color: #9CF;
	width: 88px;
}

.menu .sub dd {
	border-top: 1px solid #666;
	text-align: center;
	padding: 3px
}
</style>
<title>个人博客</title>
</head>
<body>
	<header>
	<div class="logo">
		<c:if test="${empty sessionScope.reqUser }">
			<h3>${sessionScope.username }的个人博客</h3>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<h3>${sessionScope.reqUser }的个人博客</h3>
		</c:if>
	</div>
	<nav id="nav">
	<ul>
		<li><a id="index" href="../index.jsp">网站首页</a></li>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a id="selected"
				href="${pageContext.request.contextPath}/BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a id="selected"
				href="${pageContext.request.contextPath}/BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a href="about.jsp">个人资料</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="ShareServlet?task=queryShareList&username=${sessionScope.username }">生活记录</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a
				href="ShareServlet?task=queryShareList&username=${sessionScope.reqUser }">生活记录</a></li>
		</c:if>
		<li><a href="message.jsp">留言板</a></li>
	</ul>
	</nav></header>
	<div class="mnav">
		<ul>
			<li><a id="index" href="../index.jsp">网站首页</a></li>
			<c:if test="${empty sessionScope.reqUser }">
				<li><a
					href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
			</c:if>
			<c:if test="${!empty sessionScope.reqUser }">
				<li><a
					href="BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
			</c:if>
			<c:if test="${empty sessionScope.reqUser }">
				<li><a href="about.jsp">个人资料</a></li>
			</c:if>
			<li><a href="share.jsp">生活记录</a></li>
			<li><a href="message.jsp">留言板</a></li>
		</ul>
	</div>
	<article>
	<div class="l_box">
		<div class="about_me">

			<c:if test="${!empty sessionScope.username }">
				<h2>关于我</h2>
				<ul>
					<i><img src="/images/${sessionScope.userImg }"></i>
					<p>
						<b>姓名：${sessionScope.username }<span style="cursor: pointer;"
							onclick="logout()">[退出登录]</span></b><br> <b>性别：*</b><br> <b>联系电话：1*****</b>
					</p>
				</ul>
			</c:if>
			<c:if test="${empty sessionScope.username }">
				<h2>关于我</h2>
				<ul>
					<i><img src="images/timg.jpg"
						style="height: 80px; width: 120px"></i>
					<p>
						<b><a href="login.jsp">请登录</a></b>

					</p>
				</ul>
			</c:if>
		</div>


		<div class="fenlei"></div>

	</div>
	<div class="r_box">
		<form action="" method="post" id="myform">
			<input name="id" value="${blog.id }" style="display: none"> <input
				name="author" value="${sessionScope.username }"
				style="display: none"> 标题： <input name="title"
				value="${blog.title }" placeholder="文章标题"
				style="width: 600px; height: 30px; margin-bottom: 10px"></br> 类别：
			<select name="type" id="selroom"
				style="width: 500px; height: 30px; margin-bottom: 10px">

			</select>

			<!-- <div id="typename" style="display: none">
		分类名称：
		<input name="type" placeholder="分类名称" style="width:300px;height:30px;"></br>
		</div> -->
			<div class="menu">
				<span
					style="padding: 5px 14px; background-color: #87CEFA; cursor: pointer; margin-left: 10px">分类管理</span>
				<dl class="sub">
					<dd>
						<span id="addtype" style="cursor: pointer;">添加分类</span>
					</dd>
					<dd>
						<span id="updatetype" style="cursor: pointer;">修改分类</span>
					</dd>
					<dd>
						<span id="deltype" style="cursor: pointer;">删除分类</span>
					</dd>
				</dl>
			</div>
			<br>
			<div class="addtype" style="display: none">
				分类名称： <input class="typeName" name="type" placeholder="分类名称"
					style="width: 200px; height: 30px;"><span id="toadd"
					style="padding: 6px 13px; background-color: #87CEFA; cursor: pointer;">添加</span>
			</div>
			<div class="updatetype" style="display: none">
				修改后的分类名称： <input class="newname" name="type" placeholder="分类名称"
					style="width: 200px; height: 30px;"><span id="toupdate"
					style="padding: 6px 13px; background-color: #87CEFA; cursor: pointer;">修改</span>
			</div>
			<br> 正文：
			<textarea name="content" id="description" placeholder="文章内容..." />${blog.content }</textarea>
			<script type="text/javascript">
				CKEDITOR.replace('description');
			</script>
			<div style="float: right; margin-top: 15px">

				<c:if test="${empty blog }">
					<span id="commitblog"
						style="padding: 5px 15px; background-color: #fff; cursor: pointer; margin-right: 5px">发表</span>
					<span id="saveblog"
						style="padding: 5px 15px; background-color: #fff; cursor: pointer;">保存</span>
				</c:if>
				<c:if test="${!empty blog }">
					<span id="updateblogcommit"
						style="padding: 5px 15px; background-color: #fff; cursor: pointer; margin-right: 5px">发表</span>
					<span id="updateblog"
						style="padding: 5px 15px; background-color: #fff; cursor: pointer;">保存</span>
				</c:if>
			</div>
		</form>
	</div>
	</article>

	<footer>
	<p>
		Design by <a href="/" target="_blank">个人博客</a> <a href="/">ICP备号</a>
	</p>
	</footer>
	<script type="text/javascript">
		function logout() {
			window.location.href = "UserServlet?task=logout"
		}
	</script>
	<script type="text/javascript">
		$(document)
				.on(
						"click",
						"#addtype",
						function() {
							$(".addtype").show();
							$("#toadd")
									.click(
											function() {
												var type = $(".typeName").val();
												$
														.ajax({
															type : "post",
															url : "${pageContext.request.contextPath}/TypeServlet",
															data : {
																"task" : "addType",
																"type" : type,
															},
															success : function(
																	msg) {
																var list = eval(msg);
																var str = "";
																var str2 = "<h2>文章分类</h2><ul>";
																for (var i = 0; i < list.length; i++) {
																	str += "<option class='"+list[i].id+"' name='type' value='"+ list[i].type+"'>"
																			+ list[i].type
																			+ "</option>";
																	str2 += "<li><a href='/'>"
																			+ list[i].type
																			+ "</a></li>"
																}
																$(
																		"select[name='type']")
																		.html(
																				"")
																str2 += "</ul>";
																$(
																		"select[name='type']")
																		.append(
																				str)
																$(".fenlei")
																		.html(
																				"")
																$(".fenlei")
																		.append(
																				str2)
																$(".addtype")
																		.hide();
															}
														})
											});
						});
		$("#updatetype")
				.click(
						function() {
							$(".updatetype").show();
							$("#toupdate")
									.click(
											function() {
												var id = $("#selroom").find(
														"option:selected")
														.attr("class");

												var type = $(".newname").val();
												$
														.ajax({
															type : "post",
															url : "${pageContext.request.contextPath}/TypeServlet",
															data : {
																"task" : "updateType",
																"id" : id,
																"type" : type,
															},
															success : function(
																	msg) {
																var list = eval(msg);
																var str = "";
																var str2 = "<h2>文章分类</h2><ul>";
																for (var i = 0; i < list.length; i++) {
																	str += "<option class='"+list[i].id+"' name='type' value='"+ list[i].type+"'>"
																			+ list[i].type
																			+ "</option>";
																	str2 += "<li><a href='/'>"
																			+ list[i].type
																			+ "</a></li>"
																}
																$(
																		"select[name='type']")
																		.html(
																				"")
																str2 += "</ul>";
																$(
																		"select[name='type']")
																		.append(
																				str)
																$(".fenlei")
																		.html(
																				"")
																$(".fenlei")
																		.append(
																				str2)
																$(".updatetype")
																		.hide();
															}
														})
											})
						});
		$("#deltype")
				.click(
						function() {

							var id = $("#selroom").find("option:selected")
									.attr("class");

							$
									.ajax({
										type : "post",
										url : "${pageContext.request.contextPath}/TypeServlet",
										data : {
											"task" : "delType",
											"id" : id,
										},
										success : function(msg) {
											var list = eval(msg);
											var str = "";
											var str2 = "<h2>文章分类</h2><ul>";
											for (var i = 0; i < list.length; i++) {
												str += "<option class='"+list[i].id+"' name='type' value='"+ list[i].type+"'>"
														+ list[i].type
														+ "</option>";
												str2 += "<li><a href='/'>"
														+ list[i].type
														+ "</a></li>"
											}
											$("select[name='type']").html("")
											str2 += "</ul>";
											$("select[name='type']")
													.append(str)
											$(".fenlei").html("")
											$(".fenlei").append(str2)
										}
									})

						});
	</script>
	<script type="text/javascript">
		$(function() {
			$
					.ajax({
						type : "post",
						url : "${pageContext.request.contextPath}/TypeServlet",
						data : {
							"task" : "queryTypeList",
						},
						success : function(msg) {
							var list = eval(msg);
							var str = "";
							var str2 = "<h2>文章分类</h2><ul>";
							for (var i = 0; i < list.length; i++) {
								str += "<option class='"+list[i].id+"' name='type' value='"+ list[i].type+"'>"
										+ list[i].type + "</option>";
								str2 += "<li><a href='${pageContext.request.contextPath}/BlogServlet?task=queryBlogByType&type="
										+ list[i].type
										+ "'>"
										+ list[i].type
										+ "</a></li>"
							}
							str2 += "</ul>";
							$("select[name='type']").append(str)
							$(".fenlei").append(str2)
						},

					})
		})
	</script>

	<script type="text/javascript">
		$(".article").click(function() {
			var count = $("#count").text();
			var id = $(this).attr("id");
			var href = $(this).attr("href");
			$.ajax({
				type : "post",
				url : "BlogServlet",
				data : {
					"task" : "updateCount",
					"id" : id,
					"count" : count,
				},
				success : function(msg) {

				},

				error : function(error) {
					alert("error")
				}
			})
		})
	</script>
	<script type="text/javascript">
		$("#commitblog")
				.click(
						function() {
							var newUrl = '${pageContext.request.contextPath}/BlogServlet?task=addBlog&status=1'; //设置新提交地址
							$("#myform").attr('action', newUrl); //通过jquery为action属性赋值
							$("#myform").submit(); //提交ID为myform的表单
						})
		$("#saveblog")
				.click(
						function() {
							var newUrl = '${pageContext.request.contextPath}/BlogServlet?task=addBlog&status=0'; //设置新提交地址
							$("#myform").attr('action', newUrl); //通过jquery为action属性赋值
							$("#myform").submit(); //提交ID为myform的表单
						})
		$("#updateblog")
				.click(
						function() {
							var newUrl = '${pageContext.request.contextPath}/BlogServlet?task=addBlog&status=0&action=update'; //设置新提交地址
							$("#myform").attr('action', newUrl); //通过jquery为action属性赋值
							$("#myform").submit(); //提交ID为myform的表单
						})
		$("#updateblogcommit")
				.click(
						function() {
							var newUrl = '${pageContext.request.contextPath}/BlogServlet?task=addBlog&status=1&action=update'; //设置新提交地址
							$("#myform").attr('action', newUrl); //通过jquery为action属性赋值
							$("#myform").submit(); //提交ID为myform的表单
						})
	</script>
	<script>
		$(function() {
			$('.menu').mouseover(function(e) {
				$(this).find('.sub').toggle();
			});
			$('.menu').mouseout(function(e) {
				$(this).find('.sub').toggle();
			});
		});
	</script>

	<script type="text/javascript">
		$("#index").click(function() {
			window.location.href = "../UserServlet?task=out"
		})
	</script>

</body>
</html>